<template>
  <div>
    <div class="mui-popover mui-popover-action slg-address-manager" style="height: 100%; background-color: #efeff4;">
      <header id="header" class="auto-rem mui-bar mui-bar-nav">
        <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap.prevent.stop="closeConfirm"></a>
        <h1 class="mui-title">
          地址管理
        </h1>
        <a class="mui-icon mui-pull-right mui-icon-plusempty" @tap.prevent.stop="addContact()"></a>
      </header>
      <div class="mui-content">

        <div v-for="usercontact in contacts" class="contact" @tap.prevent.stop="selectContact(usercontact)">
          <div class="contact-top">
            <div class="user">收货人 : {{usercontact.name}}</div>
            <div class="phone">{{usercontact.phone}}</div>
          </div>
          <div class="contact-bottom">
            {{usercontact.province}} {{usercontact.city}} {{usercontact.district}} {{usercontact.address}}
          </div>
          <div style="margin-left: 30px;">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @tap.prevent.stop="editContact(usercontact)">编辑</button>
            <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @tap.prevent.stop="deleteContact(usercontact.id)">删除</button>
          </div>
        </div>
      </div>
    </div>
    <div class="mui-popover mui-popover-action slg-add-address" style="height: 100%; background-color: #efeff4;">
      <form class="mui-input-group">
        <div class="mui-input-row">
          <label>姓名</label>
          <input type="text" class="mui-input-clear" placeholder="请输入用户名" v-model="curContact.name">
        </div>
        <div class="mui-input-row">
          <label>手机号码</label>
          <input type="text" class="mui-input-clear" placeholder="请输入手机号码" v-model="curContact.phone">
        </div>
        <div class="mui-input-row" @tap.prevent.stop="chooseArea()">
          <label>省市区</label>
          <textarea v-if="curContact.district"  class="mui-input-clear" placeholder="请选择省市区" rows="1">{{curContact.province}} - {{curContact.city}} - {{curContact.district}}</textarea>
          <textarea v-else  class="mui-input-clear" placeholder="请选择省市区" rows="1"></textarea>
        </div>
        <div class="mui-input-row" style="height: 100px">
          <label>详细地址</label>
          <span></span>
          <textarea class="mui-input-clear" placeholder="请输入详细地址" rows="3" v-model="curContact.address"></textarea>
        </div>
        <div class="mui-button-row">
          <button type="button" class="mui-btn mui-btn-primary" @tap.prevent.stop="submitContact()">确认</button>
          <button type="button" class="mui-btn mui-btn-danger" @tap.prevent.stop="cancelContact()">取消</button>
        </div>
      </form>
    </div>
    <div v-show="showAreaChoose" class="slg-choose-area">
      <v-distpicker v-if="curContact.province" type="mobile" :province="curContact.province" :city="curContact.city" :area="curContact.district" @selected="onAreaSelect"></v-distpicker>
      <v-distpicker v-else type="mobile" @selected="onAreaSelect" static-placeholder></v-distpicker>
    </div>
  </div>
</template>

<script>

  import {ajax, userSettings, userRedirect, callWechatPay} from 'assets/js/Lib'

  import 'assets/css/mui.css'

  import HbHead from 'components/HbHead'
  import NavBarTab from 'components/NavBarTab'
  import VDistpicker from 'v-distpicker'

  export default {
    data() {
      return {
        contacts: [],
        curContact: {
          province: null,
          city: null,
          district: null,
        },
        showAreaChoose: false,
      }
    },
    props: {
      onSelect: {type: Function}
    },
    components: {
      HbHead, NavBarTab, VDistpicker
    },
    computed: {},
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {

    },
    //在挂载开始之前被调用
    beforeMount() {

    },
    //已成功挂载，相当ready()
    mounted() {

      const vm = this;
      this.getContacts();

      mui.init({
        statusBarBackground: '#f7f7f7'
      })
    },
    //相关操作事件
    methods: {
      closeConfirm: function () {
          mui('.slg-address-manager').popover('hide');
        mui('.slg-cart-confirm').popover('show')
      },
      getContacts() {
        ajax({
          url: '/api/contact/index',
          type: 'GET',
          dataType: 'json',
          success: (contacts => {
            this.contacts = contacts;
          })
        })
      },
      selectContact(contact) {
        console.log('selectContact clicked');
        if (this.onSelect) {
          this.onSelect(contact);
          mui('.slg-address-manager').popover('hide');
          mui('.slg-cart-confirm').popover('show');
        }
      },
      addContact () {
        console.log('addContact click');
        mui('.slg-address-manager').popover('hide');
        mui('.slg-add-address').popover('show');
      },
      editContact(contact) {
        this.curContact = contact;
        console.log('editContact click');
        mui('.slg-add-address').popover('show');
      },
      deleteContact(id) {
        ajax({
          url: '/api/contact/delete',
          type: 'GET',
          data: {id: id},
          dataType: 'json',
          success: (() => {
            this.getContacts();
          })
        })
      },
      chooseArea() {
        setTimeout(() => {
          this.showAreaChoose = true;
        }, 500);
      },
      onAreaSelect(obj) {
        console.log('onAreaSelect', obj);
        this.curContact.province = obj.province.value;
        this.curContact.city = obj.city.value;
        this.curContact.district = obj.area.value;
        setTimeout(() => {
          this.showAreaChoose = false;
        }, 500);
      },
      submitContact() {
        let data = {
          name: this.curContact.name,
          phone: this.curContact.phone,
          address: this.curContact.address,
          province: this.curContact.province,
          city: this.curContact.city,
          district: this.curContact.district,
        };
        if (this.curContact.id) {
          data.id = this.curContact.id;
        }

        ajax({
          url: '/api/contact/add',
          type: 'POST',
          data: data,
          dataType: 'json',
          success: (() => {
            this.getContacts();
            this.curContact = {
              province: null,
              city: null,
              district: null,
            },
            mui('.slg-address-manager').popover('show');
            mui('.slg-add-address').popover('hide');
          })
        })
      },
      cancelContact() {
        mui('.slg-address-manager').popover('show');
        mui('.slg-add-address').popover('hide');
      },
    }
  }
</script>

<style lang="less">
  .content-banner {
    height: 60px;
  }

  .text-button {
    width: 24.99%;
    height: inherit;
    float: left;
    padding: 15px;
    cursor: pointer;

    &:active {
      background: #eee;
    }

    span {
      display: block;
      font-size: 12px;
      line-height: 12px;
      color: #232326;
      text-align: center;
    }

    span.header-text {
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 6px;
    }
  }

  .img-button {
    width: 33.33%;
    height: inherit;
    float: left;
    padding: 15px;
    cursor: pointer;

    &:active {
      background: #eee;
    }

    img {
      width: 100%;
      height: 100%;
    }

    span.button-header {
      width: 21px;
      height: 18px;
      margin: 0 auto;
      margin-bottom: 4px;
      position: relative;
      display: block;

      .mui-badge {
        position: absolute;
        right: -15px;
        top: -10px;
      }
    }

    span.button-footer {
      display: block;
      font-size: 11px;
      line-height: 11px;
      color: #232326;
      text-align: center;
      margin-bottom: 4px;
    }
  }

  #app {

    img.slg {
      width: 15px;
      height: 18px;
    }

    .mui-table-view ~ .mui-card {
      margin-top: -2px;
    }

    .mui-table-view-cell {
      &:after {
        left: 0px;
      }
    }

    .mui-navigate-right {
      padding: 10px 65px 10px 11px;
      font-size: 14px;
      min-height: 32px;
    }

    .mui-navigate-right > .text {
      color: #bbb;
      right: 35px;
      position: absolute;
      top: 28%;
    }

    .mui-card {
      margin: 15px 0 10px 0;
      border-radius: 0px;
      box-shadow: 0 0px 1px rgba(0, 0, 0, .3);
    }

    .mui-table-view {
      /*margin-top: 25px;*/
    }

    .address-container {
      height: 500px;
      overflow-y: auto;
    }
  }

  .slg-choose-area {
    position: fixed;
    top: 0 !important;
    width: 100%;
    height: 100%;
    z-index: 99999;
  }
</style>
